@use "../../common.scss";

.nuclear.ui.dropdown {
  color: common.$white;
  background: common.$background3;
  border: 1px solid rgba(common.$background2, 0.6);
  transition: box-shadow common.$short-duration ease-in;

  &:hover,
  &:active,
  &:focus,
  &.ui.selection.active.dropdown {
    &:not(.no_background) {
      @include common.shadow;
      color: common.$white;
      border: 1px solid transparent;
    }
  }

  &.no_caret {
    .dropdown.icon {
      display: none;
    }
  }

  &.no_border {
    border: none;
  }

  &.no_background {
    background: none;
    box-shadow: none;
  }

  .dropdown.icon {
    display: flex;
    align-items: center;
    height: 100%;
    color: common.$white;
  }

  .text.divider {
    color: common.$white !important;
  }

  .text:not(.divider),
  input {
    color: common.$white !important;
    line-height: 1.25;
  }

  .menu {
    @include common.shadow;
    background: common.$background;
    border-color: transparent !important;
    color: common.$white !important;
    border: 0;

    .item {
      color: common.$white !important;
      border-color: transparent !important;

      &:hover,
      &:active,
      &:focus {
        background: rgba(common.$lightbg, 0.4) !important;
      }
    }

    .active.selected.item,
    .message {
      background: rgba(common.$lightbg, 0.2);
      color: common.$white !important;
    }

    &.visible {
      animation: fade-in common.$short-duration normal forwards ease-in-out;
    }
  }

  &.lighter {
    background: rgba(common.$bglighter, 0.25);
    border: none;
    min-height: 0;

    &:hover,
    &:active,
    &:focus,
    &.ui.selection.active.dropdown {
      border: none;
    }

    .menu {
      margin: 0;
      width: 100%;
      min-width: 100%;
      border-top: 1px solid rgba(common.$bglighter, 0.6) !important;
    }

    .active.selected.item,
    .message {
      color: common.$white !important;
    }
  }
}
